<template>
	<loading v-if="isLoading" style="height: 70vh;"></loading>
	<view class="empty" v-else-if="!goodInfo">
		<image
			src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
			mode="widthFix"></image>
		<text>这里空空荡荡，啥也没有留下</text>
	</view>
	<view v-else>
		<tn-form :model="goodInfo" ref="formRef" :rules="formRules" label-position="top">
			<tn-form-item label="商品名称" prop="goods_title">
				<tn-input v-model="goodInfo.goods_title" placeholder="请输入商品名称" clearable />
			</tn-form-item>
			<tn-form-item label="商品售价" prop="goods_price">
				<tn-input type="digit" v-model="goodInfo.goods_price" placeholder="请输入商品售价" clearable />
			</tn-form-item>
			<tn-form-item label="商品库存" prop="stock">
				<tn-input type="number" v-model="goodInfo.stock" placeholder="请输入商品库存" clearable />
			</tn-form-item>
			<tn-form-item label="计量单位" prop="unit">
				<tn-radio-group v-model="goodInfo.unit">
					<tn-radio label="斤">斤</tn-radio>
					<tn-radio label="份">份</tn-radio>
				</tn-radio-group>
			</tn-form-item>
			<tn-form-item label="商品分类" prop="goodCategoryName">
				<tn-input type="select" v-model="goodInfo.goodCategoryName" @click="openPicker=true"
					placeholder="请选择商品分类" right-icon="down" />
			</tn-form-item>
			<tn-form-item label="商品首图" prop="goods_thumb">
				<tn-image-upload v-model="goodInfo.goods_thumb" :action="actionUrl"
					:custom-upload-callback="uploadHandle" :limit="1" :show-error-tips="false" />
			</tn-form-item>
		</tn-form>
		<view class="tn-flex-center">
			<tn-button size="lg" width="80vw" height="80" font-size="26" @click="submitForReview">确定修改</tn-button>
		</view>
	</view>
	<tn-picker v-model="goodInfo.cate_id" v-model:open="openPicker" :data="pickerData" @confirm="confirmSelect" />
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue'
	import {
		getGoodsInfoApi,
		getGoodsCategoryListApi
	} from "@/request/worktop/index.js"
	import {
		base_url,
		domain_name,
		uploadHandle
	} from "@/request/index.js"

	onMounted(() => {
		goodInfo.value.id = props.userId
		getGoodsCategoryList()
	})

	const props = defineProps(['userId'])

	const actionUrl = base_url + '/index/upload'
	const isLoading = ref(true)
	const openPicker = ref(false)
	const pickerData = ref([])
	const categoryQuery = ref({
		page: 1,
		limit: 30
	})
	const goodInfo = ref({
		id: 0,
		cate_id: 0,
		goods_title: '',
		goods_thumb: '',
		goods_thumbs: [],
		goods_price: '',
		stock: '',
		unit: '',
		goodCategoryName: ''
	})
	// 规则
	const formRules = {
		goods_title: [{
			required: true,
			message: '请输入商品名称',
			trigger: ['change', 'blur']
		}],
		goods_price: [{
			required: true,
			message: '请输入商品售价',
			trigger: ['change', 'blur']
		}, {
			pattern: /^(0\.0[1-9]|0\.[1-9]\d?|[1-9]\d{0,3}(\.\d{1,2})?)$/,
			message: '价格需在0.01-9999之间，最多两位小数',
			trigger: ['change', 'blur']
		}],
		stock: [{
			required: true,
			message: '请输入商品库存',
			trigger: ['change', 'blur']
		}, {
			pattern: /^\d{1,4}$/,
			message: '请输入0-9999之间的数字',
			trigger: ['change', 'blur'],
		}],
		unit: [{
			required: true,
			message: '请输入商品计量单位',
			trigger: ['change', 'blur']
		}],
		goods_thumb: [{
			required: true,
			message: '请上传商品首图',
			trigger: ['change', 'blur']
		}],
	}

	// 获取商品分类
	const getGoodsCategoryList = () => {
		getGoodsCategoryListApi(categoryQuery.value).then(res => {
			if (res.code == 0) {
				pickerData.value = res.data.map(i => {
					return {
						label: i.cate_name,
						value: i.id
					}
				})
				getGoodsInfo()
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		})
	}
	// 获取商品详情
	const getGoodsInfo = (type = '') => {
		getGoodsInfoApi(goodInfo.value, type).then(res => {
			if (res.code == 0) {
				let obj = JSON.parse(JSON.stringify(res.data))
				obj.goods_thumb = obj.goods_thumb ? obj.goods_thumb.split() : []
				goodInfo.value = obj
				const index = pickerData.value.findIndex(i => i.value == obj.cate_id)
				goodInfo.value.goodCategoryName = obj.cate_id ? pickerData.value[index].label : ''
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 确定修改配送商信息
	const submitForReview = () => {
		const obj = JSON.parse(JSON.stringify(goodInfo.value))
		obj.goods_thumb = obj.goods_thumb.join().replace(new RegExp(domain_name, 'g'), '')
		getGoodsInfoApi(obj, 'edit').then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: res.message
				})
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		})
	}
	// 确定选择分类
	const confirmSelect = (_, item) => {
		goodInfo.value.goodCategoryName = item.label
	}
</script>

<style scoped lang="scss">
</style>